body,ul,dl,dd,li{
    margin: 0px;
    padding: 0px;
  }
  body{
      /* position:fixed; */
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      background:url("./img/bg.png") no-repeat;
      
  }
  #player{
      position:relative;
      top: 30px;
      margin:0 auto;
      width:955px;
      height: 615px;
      /* border:1px red solid; */
      border-radius: 35px;
     
  }
  .search_bar{
      width: 953px;
      height: 52px;
      background:rgb(156,166,169);
      z-index: 800;
      position: relative;
      border-top-left-radius: 35px;
      border-top-right-radius: 35px;
  }
  .search_bar span{
  
      font-size: 26px;
      color:#fff;
      font-family: "FZSTK";
      margin-left: 20px;
      margin-top:10px;
      display:inline-block;
      /* text-shadow: 10px 10px 10px blueviolet,50px 10px 20px rgb(13, 255, 0); */
  }

  .search_bar_a {
      float:right;
      margin-top: 12px;
      margin-right: 25px;
  }
  .search_bar_a input{
      background:rgb(245,245,245);
      padding-left: 13px;
      width:200px;
      height: 27px;
      border:0px;
      outline:none;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      vertical-align: top;
      display:inline-block;  
  }
  .search_bar_a button{
      width:35px;
      height: 29px;
      margin-left: -5px;
      padding-top:5px ;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      background:rgb(245,245,245);
      outline:none;
      border:0px;
  }
  .search_bar_a button img:hover{
      width: 20px;
  }
  .center_con{
     width: 953px;
     height: 480px;
     /* border:1px solid red; */
     background:url("./img/bg.jpg") no-repeat;
  }
  li{list-style-type: none;}
  
  .song_wrapper{
      float: left;
      padding:10px;
      width: 210px;
      height: 458px;
     /* box-sizing: border-box; */
     /* border:blue 1px solid; */
     /* vertical-align: top;
      display:inline-block;  */
  }
  .song_list{
      /* margin-left: -41px; */
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      /* background:red; */
      display: block;
  } 
  .song_list::-webkit-scrollbar {
    display: none;
  }
  .song_list li{
      margin-left: 5px;
      width:95%;
      height: 40px;
      /* border:1px yellow solid; */
      background:rgb(225,225,225);
      /* display: flex; */
      /* align-items: center; */
      /* text-align: center; */
      border-radius: 40px;
      /* margin-top:20px; */
      /* display: list-item; */
      display: block;
      margin-bottom:10px;
  }
  .song_list li:hover {
      background:rgb(165, 165, 169);
      cursor:pointer;
  }
  .song_list li a{
      position: relative;
      left: 20px;
      top:10px;
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("./img/play.png");
      background-size: 100%;
  }
  .song_list li b{
      display: inline-block;
      width: 110px;
      position: relative;
      top: 11px;
      left: 20px;
      font-size: 14px;
      /* text-decoration: none; */
      font-weight: normal;
      /* 当文本溢出包含元素时发生的事情:显示省略符号来代表被修剪的文本。*/
      text-overflow: ellipsis;
      /* 规定段落中的文本不进行换行： */
      white-space: nowrap;
      overflow: hidden;
      font-family: "STXINGKA";
  }

  .song_list li div i{
      position: relative;
      display: inline-block;
      width:30px;
      height: 100px;
      background:url("./img/MV.png") no-repeat;
      left: 165px;
      bottom: 10px;
  }
  .player_con{
      /* position: relative; */
      width: 450px;
      height: 478px;
      /* border:1px yellow solid; */
      float: left;
      /* padding:10px 0px; */
  }
  .play_bar{
      position: relative;
    left: 215px;
    top: -138px;
    z-index: 10;
    transform: rotate(-25deg);
    transform-origin: 12px 12px;
    transition: 1s;
  }
  .disc{
      position: relative;
      top: 65px;
      /* z-index: 9; */
  }
  .cover{
      position: relative;
      width:141px;
      height: 140px;
      bottom: 137px;
      left: 153px;
      border-radius: 100px;
      /* z-index: 900; */
  }
  
  .songname{
      position: relative;
      width:100%;
      height: 30px;
      text-align: center;
      /* border:yellow 1px solid; */
      bottom: 40px;
      font-weight: bold;
      font-size: 18px;
      font-family: "STXINWEI";
      color:rgb(255, 255, 249);
  }

  .name{
      position: relative;
      width:100%;
      height: 30px;
      text-align: center;
      /* border:yellow 1px solid; */
      bottom: 40px;
      font-weight: 700;
      /* font-size: 17px; */
      font-family: "simkai";
      color:rgb(195, 195, 192);
  }
  .comment_wrapper{
      width:267px;
      height: 478px;
      /* border:blue 1px solid; */
      float: left;
      
  }
  .title{
      font-size: 16px;
      width:80px;
      height: 22px;
      /* border:solid 1px red; */
      position: relative;
      top:-18px;
      font-family: "STCAIYUN";
      font-size: 18px;
      /* font-weight: bold; */
      /* color:rgb(217, 24, 50) */
  }

  .comment_list{
      width:240px;
      height: 430px;
      /* border:solid 1px yellow; */
      position: relative;
      top:-40px;
      /* overflow:auto; */
      overflow-y: auto;
      overflow-x: hidden;
      /* background:red; */
      /* display: block; */
  }
  .comment_list::-webkit-scrollbar {
    display: none;
  }
  .comment_list dl{
      width: 100%;
     margin-bottom: -15px;
  }
  .comment_list dt{
      position: relative;
      /* top:10px; */
      left: 5px;
  }
  .comment_list dt img{
      width:40px;
      height: 40px;
      border-radius: 50px;
  }
  .name2{
      position: relative;
      width:74%;
      height: 22px;
      /* border:yellow 1px solid; */
      left: 60px;
      top:-40px;
      font-size: 14px;
      font-weight: bold;
      /* 当文本溢出包含元素时发生的事情:显示省略符号来代表被修剪的文本。*/
      text-overflow: ellipsis;
      /* 规定段落中的文本不进行换行： */
      white-space: nowrap;
      overflow: hidden;
  }
  .detail{
      width: 178px;
      height: 100%;
      /* border:yellow 1px solid; */
      font-size: 12px;
      color:#fff;
      position:relative;
      top:-40px;
      left: 60px;
      line-height: 20px;
  }
  .audio_con{
      width: 99.8%;
      height: 80px;
      background:rgb(204,204,204);
      border-bottom-left-radius: 35px;
      border-bottom-right-radius: 35px;
  
  
  }
  .audio_con audio{
      width: 93%;
      height: 60px;
      margin-left: 35px;
      margin-top: 7px;
      outline:none;
  }
  /* 旋转的动画 */
  @keyframes Rotate {
    from {
      transform: rotateZ(0);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
  /* 旋转的类名 */
  .autoRotate {
    animation-name: Rotate;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-duration: 5s;
  }
  /* 是否正在播放 */
  .player_con.playing .disc,
  .player_con.playing .cover {
    animation-play-state: running;
  }
  /* 播放杆 转回去 */
  .player_con.playing .play_bar {
    transform: rotate(0);
  }
  .video_con video {
    position: fixed;
    width: 800px;
    height: 646px;
    left: 50%;
    top: 2%;
    margin-top: -29px;
    transform: translateX(-50%);
    z-index: 990;
    outline:none;
  }
  .video_con .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 980;
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  @font-face {
    font-family: "FZSTK";
    src: url("./font/FZSTK.TTF");
   } 
@font-face {
    font-family: "STCAIYUN";
    src: url("./font/STCAIYUN.TTF");
   } 
@font-face {
    font-family: "STXINWEI";
    src: url("./font/STXINWEI.TTF");
   }  
@font-face {
    font-family: "simkai";
    src: url("./font/simkai.ttf");
   } 
@font-face {
    font-family: "STXINGKA";
    src: url("./font/STXINGKA.TTF");
   }  